<template>
    <Layout title="采购订单新建" showBack>
        <van-form @submit="submitEvt">
            <p class="my-title">基础信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.createName" name="userName" label="创建人" readonly />
                <van-field v-model="submitObj.createTime" name="createTime" label="创建时间" placeholder="选择创建时间" readonly
                    :rules="[{ required: true, message: '选择创建时间' }]">
                    <template #button>
                        <van-button size="small" @click="showTime = true" type="primary">选择时间</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.projectName" name="projectName" label="项目名字" placeholder="选择项目名字" readonly
                    :rules="[{ required: true, message: '选择项目名字' }]">
                    <template #button>
                        <van-button size="small" @click="showPopupEvt('project')" type="primary">选择项目</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <p class="my-title">材料信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.materialName" name="materialName" label="材料名称" placeholder="选择材料名称"
                    readonly :rules="[{ required: true, message: '选择材料名称' }]">
                    <template #button>
                        <van-button size="small" @click="showPopupEvt('meterial')" type="primary">选择材料</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.materialWeight" name="materialWeight" label="采购数量" placeholder="输入采购数量"
                    :rules="[{ required: true, message: '请输入采购数量' }]" />
                <van-field v-model="submitObj.price" name="price" label="采购单价" placeholder="输入采购单价"
                    :rules="[{ required: true, message: '请输入采购单价' }]" />
            </van-cell-group>
            <p class="my-title">供应商信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.supplierName" name="supplierName" label="名称" placeholder="选择名称" readonly
                    :rules="[{ required: true, message: '选择名称' }]">
                    <template #button>
                        <van-button size="small" @click="showPopupEvt('supplier')" type="primary">选择供应商</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.supplierContact" name="supplierContact" label="联系人" placeholder="输入联系人"
                    :rules="[{ required: true, message: '请输入联系人' }]" />
                <van-field v-model="submitObj.supplierPhone" name="supplierPhone" label="联系电话" placeholder="输入联系电话"
                    :rules="[{ required: true, message: '请输入联系电话' }]" />
            </van-cell-group>
            <p class="my-title">审批信息</p>
            <van-cell-group inset>
                <van-field v-model="submitObj.nextId" name="nextId" label="审批人" placeholder="选择审批人" readonly
                    :rules="[{ required: true, message: '选择审批人' }]">
                    <template #button>
                        <van-button size="small" @click="showPopupEvt('user')" type="primary">选择审批人</van-button>
                    </template>
                </van-field>
                <van-field v-model="submitObj.remark" name="remark" label="备注" placeholder="输入备注信息"
                    :rules="[{ required: true, message: '请输入备注信息' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" @click="saveEvt">
                    提交
                </van-button>
            </div>
        </van-form>

        <!-- 材料单位选择器 -->
        <van-popup v-model:show="showUnit" position="bottom">
            <van-picker :columns="unitOptions" @confirm="unitPickerEvt" @cancel="showUnit = false" />
        </van-popup>
        <!--  -->
        <!-- 日期选择器 -->
        <van-calendar v-model:show="showTime" @confirm="timePickerEvt" color=" #ed7b2f" />

        <!--
            引入一个通用的弹出框，所有的弹出框都是它，无非不过显示的数据不一样
            每次点击以后，用户选择的数据需要传递上来
        -->
        <MyPopup v-model="showPopup" :type="popupType" @pickDataEvt="popupPickEvt" />
    </Layout>
</template>

<script setup>
import { showSuccessToast, showFailToast } from 'vant'

import { onMounted, reactive, ref } from 'vue'
import { commonDefinition } from '../../store'
import { purchaseSaveApi } from '../../apis/purchaseApi'
import MyPopup from './MyPopup.vue'

const userInfo = commonDefinition().getUserInfo
const submitObj = reactive({
    nextId: '',
    createId: userInfo.id,
    createName: userInfo.name,
    createTime: '',
    projectId: '',
    projectName: '',
    materialId: '',
    materialName: '',
    materialUnit: '',
    materialWeight: '',
    price: '',
    supplierId: '',
    supplierName: '',
    supplierContact: '',
    supplierPhone: '',
    remark: ''
})
const unitOptions = ['本', '吨', '方', '袋', 'g', '箱']
const showUnit = ref(false)
const showTime = ref(false)
const showPopup = ref(false)
const popupType = ref('')

// 所有弹出框的点击事件
function showPopupEvt(type) {
    popupType.value = type
    showPopup.value = true
}

function submitEvt() {
    // submit的时候，nextId是一个数组
    console.log({ ...submitObj, nextId: [submitObj.nextId] })
}

function timePickerEvt(_time) {
    showTime.value = false
    submitObj.createTime = `${_time.getFullYear()}-${_time.getMonth() + 1}-${_time.getDate()}`
}

function unitPickerEvt(val) {
    submitObj.materialUnit = val
    showUnit.value = false
}

function popupPickEvt(it) {
    switch (popupType.value) {
        case 'project':
            submitObj.projectId = it.id
            submitObj.projectName = it.name
            break
        case 'meterial':
            submitObj.materialId = it.id
            submitObj.materialName = it.name
            break
        case 'supplier':
            submitObj.supplierId = it.id
            submitObj.supplierName = it.name
            submitObj.supplierContact = it.contact
            submitObj.supplierPhone = it.phone
            break
        case 'user':
            submitObj.nextId = it.id
            break
    }
    showPopup.value = false
}

function saveEvt() {
    let result = purchaseSaveApi(submitObj)

    if (result.code === 200) {
        showSuccessToast('新建成功')

    } else {
        showSuccessToast('新建成功')
    }
}

</script>

<style lang="less" scoped>
@import url('../../style/common.less');


.my-title {
    padding: 16px 0;
    margin: var(--van-cell-group-inset-padding);
    font-size: .8rem;
    color: #999;
}
</style>